<!--累充活动-->
<template>
	<view class="">
		<view class="hdtybox" :class="hdc">
			<topboxVue :tit="$t('hd.bt12')"></topboxVue>
			<view class="ycjjbox">

				<view class="ycjjbox-item bj_left" v-for="item in list">
					<image src="/static/hd/jq.png" class="ycjjbox-item-jbp"></image>
					<view class="">
						<view class="f30 mb10">
							{{$t("menu.$")}}{{item.bonus}}
						</view>
						<view class="f24 c9c mb20">
							{{$t("ycjj.tit1")}}{{$t("menu.$")}}({{getuc()}}/{{item.total_recharge}})
						</view>
						<view class="ycjjbox-item-jdt">
							<view class="ycjjbox-item-jdt-mt" :style="'width: '+getbfb(item)+'%'"></view>
						</view>
					</view>
					<view @click="getm(item)"
						:class="item.is_finished == 1 && item.is_received == 0 ? 'ycjjbox-item-btn' : 'ycjjbox-item-btn2'">
						{{$t("ycjj.btn1")}}
					</view>
				</view>


				<view class="f30 fwb mb20">
					{{$t("ycjj.tit2")}}
				</view>
				<view class="f22 c9c mb10" v-for="i in 2">
					{{$t("ycjj.txt" + i)}}
				</view>
			</view>
			<bottomVue></bottomVue>
			<zero-loading type="surround" v-if="loading"></zero-loading>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<moneygcVue ref="mgcv"></moneygcVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import moneygcVue from '../common/moneygc.vue';

	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")
	let loading = ref(false)
	let mgcv = ref(null)

	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	function getuc() {
		return getApp().globalData.userInfo.recharge_all
	}

	let list = ref([])
	onShow(function() {
		winit();
	})

	function winit() {
		loading.value = true
		common.totalRecharge().then(res => {
			list.value = res.data.user.total_recharge_bonus_config
			loading.value = false
		})
	}

	function getbfb(item) {
		if (item.is_finished == 1) {
			return 100
		} else {
			0
		}
	}

	function getm(item) {
		if (loading.value) {
			return
		}
		if (item.is_finished == 1 && item.is_received == 0) {
			loading.value = true
			common.getBonus({
				id: item.id
			}).then(res => {
				if (res.data.success) {
					mgcv.value.setm(res.data.data.bonus)
				} else {
					messageText.value = res.data.message
					msgType.value = "error"
					message.value.open();
				}
				loading.value = false
			})
		}


	}
</script>

<style scoped lang="scss">
	.ycjjbox {
		padding: 30rpx 20rpx;

		&-item {
			background: #00561D;
			border-radius: 20rpx;
			padding: 28rpx 22rpx;
			margin-bottom: 20rpx;

			&-jbp {
				width: 72rpx;
				height: 72rpx;
				margin-right: 20rpx;
			}

			&-btn {
				width: 180rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				background: linear-gradient( 360deg, #009E35 0%, #10E658 100%);
				border-radius: 12rpx;
				font-size: 28rpx;
			}

			&-btn2 {
				width: 180rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				background: linear-gradient( 360deg, #009E35 0%, #10E658 100%);
				border-radius: 12rpx;
				font-size: 28rpx;
				opacity: 0.8;
			}

			&-jdt {
				width: 364rpx;
				height: 14rpx;
				background: #000000;
				border-radius: 100rpx;
				margin-right: 26rpx;
				position: relative;

				&-mt {
					position: absolute;
					left: 0;
					top: 0;
					height: 14rpx;
					background: #FFBE32;
					border-radius: 100rpx;
				}
			}
		}

		&-item:last-child {
			margin-bottom: 50rpx;
		}
	}
</style>